import React, { Component } from 'react';
import { View, Image, TouchableHighlight, StyleSheet, ImageBackground } from 'react-native';
import PropTypes from 'prop-types';

import {getSliderStyle} from './SliderStyle'
import Variables from '../../config/theme/styles/index';


export default class SliderEntry extends Component {

    constructor(props) {
        super(props);
    }

    _clickFunc() {
        if(this.props.clickFunc){
            this.props.clickFunc(this.props.data.id);
        }    
    }

    render () {
        let { styles,SliderStyle} = getSliderStyle(Variables);
        let { data, itemWidth, itemHeight, itemRealWidth, defaultImg, activeOpacity,
            imgMarginHorizontal,imgMarginVertical,itemAccessible } = this.props;  
        
		let itemContainerStyle;
        if (itemRealWidth && itemRealWidth < itemWidth) {
            itemContainerStyle = { marginHorizontal: (itemWidth-itemRealWidth)/2, width: itemWidth, height: itemHeight }
        } else { 
            itemContainerStyle = { width: itemWidth, height: itemHeight }
        }
        
        let imageContainerStyles = [styles.imageContainer];
        imageContainerStyles.push({marginHorizontal:imgMarginHorizontal,marginVertical:imgMarginVertical})

		let content;
        let imgStyles = [styles.imageStyle, { width: itemWidth-imgMarginHorizontal*2, height: itemHeight-imgMarginVertical*2 }];
        if (data.img) {
            if (defaultImg) {
                content = (
                    <View style={imageContainerStyles}>
                        <ImageBackground source={defaultImg} style={{ width: itemWidth-imgMarginHorizontal*2, height: itemHeight-imgMarginVertical*2 }}>
                            <Image
                                source={data.img}
                                style={imgStyles}
                            />
                        </ImageBackground>
                    </View>
                );
            } else { 
                content = (
                    <View style={imageContainerStyles}>
                        <Image
                            source={data.img}
                            style={imgStyles}
                        />
                    </View>
                );
            }               
        } else { 
            content = (
                <View style={[styles.itemContainer,itemContainerStyle]}>
                    {data.item}
                </View>
            )
        }

        return (
            <TouchableHighlight
                underlayColor='transparent'  
                style={styles.slideInnerContainer}
                onPress={this._clickFunc.bind(this)}
                activeOpacity={activeOpacity}
                accessible={itemAccessible}
            >
                {content}
            </TouchableHighlight>
        );
    }
}

SliderEntry.propTypes = {
    //数据，目前包括两种，img和item
    data: PropTypes.any.isRequired,
    //每块区域宽度
    itemWidth: PropTypes.number.isRequired,
    //每块区域高度
    itemHeight: PropTypes.number.isRequired,
    //索引
    index: PropTypes.number.isRequired,
	//自定义构件真实宽度
	itemRealWidth: PropTypes.number,
    //默认显示图片
    defaultImg: PropTypes.any,
    //自定义点击事件
    clickFunc: PropTypes.func,
	//组件按下时透明度
	activeOpacity: PropTypes.number,
    //轮播数据为图片时图片距离容器上下间距、
    imgMarginVertical: PropTypes.number,
    //轮播数据为图片时图片距离容器左右间距
    imgMarginHorizontal: PropTypes.number,
    //是否启用每一项的点击事件无障碍功能
    itemAccessible: PropTypes.bool
}

